import { Component, OnInit, ViewChild } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { HttpClient } from '@angular/common/http';

import { SimpleAnimate } from '../../../share/animation/my.simple.animation';

import { IMyDpOptions, IMyDateModel } from 'mydatepicker';
import { DateComponent } from '../../../share/component/date/date.component';

import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { listLocales } from 'ngx-bootstrap/bs-moment';

import { GoodsInfo, GoodsBanner, } from '../../model/goods.common.model';
import { Message } from '../../../share/model/message.model';

import { HttpService } from '../../../share/http/http.service';
import { NoticeService } from '../../../share/service/notice.service';


import { ImageFile } from '../../../share/model/file.model';

@Component({
  selector: 'app-demo-edit',
  templateUrl: './demo.edit.component.html',
  styleUrls: ['./demo.edit.component.css'],
  animations: [SimpleAnimate]
})
export class DemoEditComponent implements OnInit {

  id: number;

  goodsInfo: GoodsInfo = new GoodsInfo();

  expirationDate = { formatted: '' };

  goodsBanners: Array<ImageFile> = [];

  showModal = false;
  imageUrl: string;


  @ViewChild(DateComponent)
  private date: DateComponent;

  bsConfig: Partial<BsDatepickerConfig>;
  locales = listLocales();

  constructor(
    private httpService: HttpService,
    private route: ActivatedRoute,
    protected http: HttpClient,
    protected router: Router,
    protected noticeService: NoticeService) {
  }

  ngOnInit() {
    this.route.params.subscribe((params: Params) => {
      this.id = parseInt(params['id'], 10);
      // 查询商品信息
      if (this.id) {
        this.getGoodsInfo();
      }
    });
    this.bsConfig = Object.assign({}, { containerClass: 'theme-blue' }, { locale: 'zh-cn' });
  }

  back() {
    this.router.navigate(['/main/demo/list']);
  }

  add() {
    this.goodsInfo = new GoodsInfo();
    this.date.clearDate();
    this.imageUrl = '';
    this.initBanners([]);
    this.router.navigate(['/main/demo/edit', 0]);
  }

  /**
   * 保存
   */
  save() {
    this.setGoodsInfo();
    let checkMsg = this.goodsInfo.checkGoodsInfo();
    if (checkMsg) {
      this.noticeService.error(checkMsg);
      return;
    }
    let goodsInfo = this.copy(this.goodsInfo);
    this.httpService.httpPostCallback('goods/save', goodsInfo, (response) => {
      let msg = response as Message;
      this.goodsInfo.id = msg.data.id;
      this.initBanners(msg.data.banners);
      this.noticeService.success('保存成功');
      this.back();
    });
  }

  /**
   * 查询
   */
  private getGoodsInfo() {
    let url = 'goods/query/' + this.id;
    this.httpService.httpGetCallback(url, response => {
      let msg = response as Message;
      this.goodsInfo.initGoodsInfo(msg.data);
      this.initView();
    });
  }

  private initView() {
    // 图片
    this.imageUrl = this.goodsInfo.goodsImageUrl;
    // 时间
    this.expirationDate.formatted = this.goodsInfo.expirationDate;
    this.date.setDate();
    // 轮播图
    this.initBanners(this.goodsInfo.goodsBanners);
  }

  private setGoodsInfo() {
    // 图片
    this.goodsInfo.goodsImageUrl = this.imageUrl;
    this.goodsInfo.goodsImageBase64 = this.imageUrl;
    // 时间
    this.goodsInfo.expirationDate = this.expirationDate.formatted;
    // 轮播图
    let banners = [];
    if (this.goodsBanners) {
      this.goodsBanners.forEach((banner) => {
        banners.push(new GoodsBanner(banner.id, banner.url));
      });
    }
    this.goodsInfo.goodsBanners = banners;
  }

  private initBanners(banners) {
    let bannerArr = [];
    if (banners) {
      banners.forEach((banner) => {
        bannerArr.push(new ImageFile(banner.id, banner.url, null));
      });
    }
    this.goodsBanners = bannerArr;
  }

  private copy(goodsInfo: GoodsInfo): GoodsInfo {
    let copy = new GoodsInfo();
    copy.clone(goodsInfo);
    return copy;
  }

  /** =============================图片剪切 start=============================== */

  selectGoodsImage() {
    this.showModal = true;
  }

  pictureChange(event) {
    this.imageUrl = event;
  }

  onShowModalChange(event) {
    this.showModal = event;
  }

  /** =============================图片剪切 end=============================== */

}


